<template>
	<view class="update-alipay-box">
		<view class="update-item">
			<u-input placeholder="请填写支付宝姓名" :custom-style="inputStyle" type="text" height="100" v-model="updateAlipayDate.name" :clearable="false" />
		</view>
		<view class="update-item">
			<u-input placeholder="请填写支付宝账号" :custom-style="inputStyle" type="text" height="100" v-model="updateAlipayDate.account" :clearable="false" />
		</view>
		<view class="u-m-t-60">
			<!-- 使用确定按钮组件 -->
			<define-button @click="buttonClick"></define-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 支付宝信息对象
				updateAlipayDate: {
					// 支付宝姓名
					name: '',
					// 支付宝账号
					account: '',
					type: 2,
				},
				pageTitleText: '',
				inputStyle: {
					fontSize: '36rpx',
					fontFamily: 'PingFang SC',
					fontWeight: 500,
					color: '#97979F',
				}
			};
		},
		onLoad(options) {
			this.updateAlipayDate.name = options.name || ''
			this.updateAlipayDate.account = options.account || ''
			// 动态设置页面标题
			if(this.updateAlipayDate.account) {
				this.pageTitleText = '编辑支付宝信息'
			} else {
				this.pageTitleText = '添加支付宝账户'
			}
			uni.setNavigationBarTitle({
				title: this.pageTitleText
			})
		},
		methods: {
			// 确定按钮的点击事件
			async buttonClick(value) {
				// 简单校验输入框区域不能为空
				if(!this.updateAlipayDate.name || !this.updateAlipayDate.account) return this.$u.toast('请先完善支付宝信息')
				// TODO:后续的修改或提交保存逻辑
				const res = await this.$u.api.editProfileDatas(this.updateAlipayDate)
				if(!res) return
				this.$u.route({
					type: 'back'
				})
				this.$u.toast( this.pageTitleText + '成功')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.update-alipay-box {
		height: 100vh;
		background-color: #F4F6FA;
		padding-top: 20rpx;
		.update-item {
			height: 100rpx;
			background-color: white;
			border-bottom: 1rpx solid #E7EAF0;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #141418;
			padding: 0 25rpx;
		}
	}
</style>
